<template id="option_item">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-6">
            <textarea class="form-control editor" rows="6" v-model="content" placeholder="{:__('Content')}:" name="content[]" data-rule="required;" ></textarea>
        </div>
        <div class="col-xs-12 col-sm-2">
            <input type="radio"  v-model="correct" name="correct"  value="1"> {:__('Correct')}<br/>
        </div>

        <div class="col-xs-12 col-sm-2">
            <button type="button" @click="delOptionItemByComponent(index)" class="btn btn-success btn-embossed">{:__('Delete')}</button>
        </div>
    </div>
</template>
<form id="form" class="form-horizontal form-ajax" role="form" data-toggle="validator" method="POST" action="">
    <div id="form_div">
        <div class="form-group">
            <label for="title" class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea class="form-control" id="title" name="row[title]" data-rule="required;title" v-model="topic.title"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label for="grade" class="control-label col-xs-12 col-sm-2">{:__('Grade')}:</label>
            <div class="col-xs-12 col-sm-8">
                <select id="grade" v-model="topic.grade" name="row[grade]" class="form-control" data-rule="required">
                    <option value="0">{:__('Grade 1')}</option>
                    <option value="1">{:__('Grade 2')}</option>
                    <option value="2">{:__('Grade 3')}</option>
                    <option value="3">{:__('Grade 4')}</option>
                    <option value="4">{:__('Grade 5')}</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="category_id" class="control-label col-xs-12 col-sm-2">{:__('Category')}:</label>
            <div class="col-xs-12 col-sm-8">
                <select id="category_id" v-model="category_id" name="row[category_id]" class="form-control" data-rule="required">
                    <option :value="category.id" v-for="category in category_list">{{category.name}}</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="sub_category_id" class="control-label col-xs-12 col-sm-2">{:__('Sub category')}:</label>
            <div class="col-xs-12 col-sm-8">
                <select id="sub_category_id" v-model="topic.sub_category_id" name="row[sub_category_id]" class="form-control" data-rule="required">
                    <option :value="category.id" v-for="category in sub_category_list">{{category.name}}</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="is_use" class="control-label col-xs-12 col-sm-2">{:__('Is use')}:</label>
            <div class="col-xs-12 col-sm-8">
                <select id="is_use" v-model="topic.is_use" name="row[is_use]" class="form-control" data-rule="required">
                    <option value="0">{:__('Do not use')}</option>
                    <option value="1">{:__('Use')}</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="title" class="control-label col-xs-12 col-sm-2">{:__('Option')}:</label>
            <div class="col-xs-12 col-sm-8">
                <button type="button" @click="addOptionItem('option_item_component')" class="btn btn-success btn-embossed">{:__('Add')}</button>
            </div>
        </div>

        <div >
            <div :is="item.component" @on-correct-change="onCorrectChange"  @on-content-change="onContentChange"  :index.sync="item.index" :content.sync="item.content"   :correct.sync="item.correct" v-for="item in radio_items"></div>
        </div>
    </div>
    <div class="form-group hidden layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="button" id="add_button" class="btn btn-success">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>